<template>
	<view class="container">
		<block v-if="pklotStatus">
			<uni-card :is-shadow="true" :title="roominfo.owner_name"
			 :subTitle="roominfo.building+'-'+roominfo.unit+'-'+roominfo.room">
				<view class="xztv-row">
					<block v-for="(item,index) in pklotList" :key="index">
						<view style="width: 50%;">车位号{{index+1}}:{{item.pklot}}</view>
						
					</block>
				</view>
				
			</uni-card>
			<block v-for="(item,index) in carList" :key="index">
				<uni-card :is-shadow="true" :title="item.plateNumber" :subTitle="'车位号:'+item.pklot">
					<text>到期时间:{{item.endTime}}</text>
					<view>姓名:{{item.empName}}</view>
					<view>手机:{{item.empMoblie}}</view>
					<template v-slot:actions>
						<view class="card-actions" style="position:absolute;right:20rpx;top:15rpx;bottom: 15rpx;">
							
							<view class="card-actions-item" @click="deletePlateNumber(item)">
								<uni-icons type="trash" size="18" color="#999"></uni-icons>
								<text class="card-actions-item-text">删除</text>
							</view>
						</view>
					</template>
				</uni-card>
			</block>
			<view v-if="carList.length==0" style="height: 500rpx;">
				<empty ></empty>
			</view>
			
			<view class="add-btn zaozao-flex-center"  @click="addPlateNum" v-if="carList.length<4">
				<text>添加车牌</text>
			</view>
		</block>
		<block v-else>
			<view class="add-btn zaozao-flex-center" style="margin-top:100px" @click="toPklot" >
				<text>同步车位组</text>
			</view>
		</block>
		
		<view style="height: 200rpx;margin-top:100rpx;width: 702rpx;margin-left:24rpx;color:black">
			<view style="color: red;">
				温馨提示：
			</view>
			<view style="margin-top:20rpx;font-size:28rpx;">
				1、每个车位可添加4个车牌，如车位上已停放1辆，其他车辆无法进入地库必须停放路面转临时车辆开始计费。
			</view>
			<view style="margin-top:20rpx;font-size:28rpx;">
				2、车牌可自助删除与修改，添加成功就可以正常使用。
			</view>
			<view style="margin-top:20rpx;font-size:28rpx;">
				3、如有其他问题可联系管家进行操作。
			</view>
		</view>
		<uni-popup ref="popupRef" >
			<view style="width: 750rpx;">
				<b5-car-number @carInput="carInput" :car-num="car"></b5-car-number>
			</view>
			<view class="add-btn zaozao-flex-center" style="margin-top: 30rpx;" v-if="car.length>=7" @click="">
				<text>添加车牌</text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {getList,deletePlateNumber} from "@/api/carMonthlyRental.js";
	export default {
		data() {
			return {
				showLicenseDialog: false, //是否显示添加车牌的dialog
				car:'',
				avatar:"",
				carList:[],
				
				pklotStatus:false,
				roominfo:{},//房屋信息
				pklotList:[],//车位组列表
			}
		},
		onLoad() {
			console.log("yangzl");
			
		},
		onShow(){
			this.getList()
		},
		methods: {
			getList(){
				getList().then((res)=>{
					if(res.data.code==0){
						this.carList=res.data.data;
						this.pklotStatus=res.data.pklotStatus;
						this.roominfo=res.data.roominfo;
						this.pklotList=res.data.pklotList;
					}
					console.log("res",res);
				})
			},
			deletePlateNumber(item){
				let that=this;
				uni.showModal({
					title:"删除车牌",
					content:"删除后无法恢复，是否确定删除？",
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.deletePlateNumberAction(item)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			deletePlateNumberAction(item){
				deletePlateNumber(item).then((res)=>{
					if(res.data.code==0){
						uni.showToast({
							title:res.data.msg,
							duration:2000,
							icon:"success"
						});
						this.getList()
					}else{
						uni.showToast({
							title:res.data.msg,
							duration:2000,
						});
					}
				})
			},
			addPlateNum(){
				this.$navigateCheck(`/pages/car/monthlyRental/add`)
			},
			carModal(){
			    this.$refs.popupRef.open()
			},
			carInput(numList){
			    this.car = numList.join('')
			},
			toPklot(){
				this.$navigateCheck(`/pages/car/pklot/index`)
			}
		}
	}
</script>

<style scoped lang="less">
	.container{
	  width:750rpx;
	  
	}
	.xztv-row{
		display: flex;
		flex-direction: row;
	}
	.add-btn{
		width: 702rpx;
		height: 80rpx;
		background: #40C7B8;
		border-radius: 156rpx;
		opacity: 1;
		margin-left:24rpx;
		color:white;
		
	}
</style>